<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="航班号">
      <el-input style="width: 390px" v-model="form.fide"></el-input>
    </el-form-item>
    <el-form-item label="日期">
       <el-col :span="13">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.ddtm"
            style="width: 200px"
            format="YYYY年MM月DD日">
          </el-date-picker>
        </el-col>
    </el-form-item>
    <el-form-item label="行李提取编号">
      <el-input style="width: 350px" v-model="form.code"></el-input>
    </el-form-item>
  </el-form>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>

  <!-- 数据表 -->
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column property="ddtm" label="日期" width="200">
    </el-table-column>
    <el-table-column property="fide" label="航班号" width="100">
    </el-table-column>
    <el-table-column property="btno" label="行李提取转盘序号" width="150">
    </el-table-column>
    <el-table-column property="code" label="行李提取转盘编号" width="150">
    </el-table-column>
    <el-table-column property="estr" label="预计使用时间" width="200">
    </el-table-column>
    <el-table-column property="eend" label="预计结束时间" width="200">
    </el-table-column>
    <el-table-column property="rstr" label="实际使用时间" width="200">
    </el-table-column>
    <el-table-column property="rend" label="实际结束时间" width="200">
    </el-table-column>
    <el-table-column property="edit" label="操作" v-if="isRoot">
      <template #default="scope">
        <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)"
        >修改</el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>


  <!-- 编辑行李 -->
  <el-dialog
      v-model="dialogVisible"
      width="50%"
  >
    <h2 style="text-align: center">行李管理</h2>
    <br/>
    <el-form :model="role"
             label-width="120px"
             :size="formSize"
             id="editForm"
             :rules="rules"
             ref="ediForm"
    >
    <el-form-item label="日期" prop="ddtm">
        <el-input  v-model="role.ddtm" />
      </el-form-item>
      <el-form-item label="航班号" prop="fide">
        <el-input v-model="role.fide" />
      </el-form-item>
      <el-form-item label="转盘序号" prop="btno">
        <el-input v-model="role.btno" />
      </el-form-item>
      <el-form-item label="转盘编号" prop="code">
        <el-input  v-model="role.code" />
      </el-form-item>
      <!-- <el-form-item label="预计使用时间" prop="estr">
        <el-input v-model="role.estr" />
      </el-form-item> -->
      <el-form-item label="预计使用时间">
       <el-col :span="13">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="role.estr"
            style="width: 200px"
            format="YYYY-MM-DD HH:mm:ss">
          </el-date-picker>
        </el-col>
    </el-form-item>
      <el-form-item label="预计结束时间" prop="eend">
        <el-input v-model="role.eend" />
      </el-form-item>
      <el-form-item label="实际使用时间" prop="rstr">
        <el-input  v-model="role.rstr" />
      </el-form-item>
      <el-form-item label="实际结束时间" prop="rend">
        <el-input v-model="role.rend" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button  @click="cancel">取消</el-button>
        <el-button  type="primary" @click="edit">
          确定修改
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 分页组件 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="count"
    :current-page="page"
    :pageCount="pageCount"
    @current-change="changePage"
  >
  </el-pagination>
</template>
<script>
 import { ElMessageBox } from 'element-plus'
export default {
  name: "luggage",
  data() {
    return {
      isRoot:false,

      dialogVisible:false,
      formSize:"default",

      called:false,
      tableDataType: 1,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}],
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      form: {
        fide: "",
        ddtm: "",
        code: "",
      },
      role: {
        dfmeMetaId: "",
        ddtm: "",
        fide: "",
        btno: "",
        code: "",
        estr: "",
        eend: "",
        rstr: "",
        rend: "",
      }
    }
    },
    methods: {
      combiningStrings(date){
      var mon= date.substring(4,7);
      var year = date.substring(11,15);
      var day = date.substring(8,10);
      switch (mon) {
        case"Jan":
          mon="01";
          break;
        case "Feb":
          mon="02";
          break;
        case "Mar":
          mon="03";
          break;
        case "Apr":
          mon="04";
          break;
        case "May":
          mon="05";
          break;
        case "Jun":
          mon="06";
          break;
        case "Jul":
          mon="07";
          break;
        case "Aug":
          mon="08";
          break;
        case "Sep":
          mon="09";
          break;
        case "Oct":
          mon="10";
          break;
        case "Nov":
          mon="11";
          break;
        case "Dec":
          mon="12";
          break;
      }
      let combineDate =(year+mon+day);
      return combineDate;
    },
      changePage(currentPage) {
      this.page = currentPage; 
      switch (this.tableDataType){
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },
    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get(" http://localhost:8888/DfmeBase/findLuggage", { params: { pageNum, pageSize } })
        .then((response) => {
          // console.log("findLuggage");
          console.log(response.data);
          // console.log("findLuggage");
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    onSubmit(form){
      var ddtm = this.combiningStrings(this.form.ddtm.toString());
      var fide=this.form.fide;
      var code=this.form.code;
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get("http://localhost:8888/DfmeBase/searchLuggage", {params: {code,fide,ddtm, pageNum, pageSize}})
        .then((response) => {
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / 10);
          this.tableData = result.list;

          if(result.list.length!=0 && !this.called){
            this.tableDataType=2;
            this.$message.success({
              type:"success",
              message:"查询成功"
            })
            this.called=true;
          }
          if(result.list.length==0){
            this.tableDataType=1;
            this.$message.error({
              type:"error",
              message:"查询失败，没有数据"
            })

          }
          
        })
        .catch(() => {
          console.error(error);
        });
    },
    handleEdit(number,role) {
      // console.log(role.dfmeMetaId);
      console.log(role);
      this.dialogVisible=true;
      this.role = role;
      // console.log(this.role)
    },
    edit(){
      
      if (confirm("是否确认修改？！")) {
        this.$axios
        .post("http://localhost:8888/DfmeBase/editLuggage",this.role)
        .then((response) => {
          if (response.data.status==10000){
            this.$message.success("修改成功！！!");
            this.cancel();
          } else {
            this.$message.error("修改失败，请重新尝试！！！");
          }
          console.log(response.data);
        })
      } else {
        this.$message.error("已取消修改");
      }
    },
    cancel(){
      this.dialogVisible=false;
      this.role={
        dfmeMetaId: "",
        ddtm: "",
        fide: "",
        btno: "",
        code: "",
        estr: "",
        eend: "",
        rstr: "",
        rend: "",
      }
    },
    handleDelete(number,role) {
      this.$message.error("暂不支持删除功能！")
    }
  },
  mounted() {
    // console.log("asd:"+sessionStorage.getItem("remark").localeCompare("超级管理"));
    // console.log("asd2:"+sessionStorage.getItem("remark").localeCompare("超级管理1"));
    // console.log("asd3:"+(sessionStorage.getItem("remark").localeCompare("超级管理")==0?true:false));
    this.isRoot=sessionStorage.getItem("remark").localeCompare("超级管理")==0?true:false;
    this.changePage(1);
  },

};
</script>
